<script setup>
import { getOrderAPI } from '@/apis/order'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { imageBaseURL } from '@/utils/request'

const route = useRoute()
const orderInfo = ref({})

// 创建格式化函数
const fomartPayState = (payState) => {
  const stateMap = {
    'Processing': '待付款',
    'Paid': '已付款',
    'Confirmed': '已确认',
    'Shipped': '已发货',
    'In_Transit': '运输中',
    'Delivered': '已送达',
    'Completed': '已完成',
    'Return': '退货/退款中',
    'Closed': '已关闭'
  }
  return stateMap[payState] || '未知状态'
}

// 格式化支付方式
const formatPayType = (payType, orderState) => {
  if (orderState === 'Closed') return '无'
  const payTypeMap = {
    'alipay': '支付宝',
    'wxpay': '微信支付',
    'bank': '银行卡支付',
    'balance': '余额支付'
  }
  return payTypeMap[payType] || '其他'
}

// 格式化商品属性
const formatProperties = (properties) => {
  if (!properties) return ''
  return properties.map(p => `${p.propertyMainName}：${p.propertyValueName}`).join('，')
}

const getOrderDetail = async () => {
  const res = await getOrderAPI(route.params.id)
  orderInfo.value = {
    ...res.result,
    payMoney: Number(res.result.payMoney)
  }
}

onMounted(() => getOrderDetail())
</script>

<template>
  <div class="order-detail-container">
    <div class="order-info">
      <h3>订单信息</h3>
      <p>订单编号：{{ orderInfo.id }}</p>
      <p>下单时间：{{ orderInfo.createTime }}</p>
      <p>订单状态：{{ fomartPayState(orderInfo.orderState) }}</p>
      <p>支付方式：{{ formatPayType(orderInfo.payType, orderInfo.orderState) }}</p>
      <p>支付金额：¥{{ orderInfo.payMoney?.toFixed(2) }}</p>
    </div>
    
    <div class="goods-list">
      <h3>商品信息</h3>
      <div class="goods-item" v-for="item in orderInfo.skus" :key="item.id">
        <img :src="imageBaseURL + item.image" :alt="item.name">
        <div class="goods-info">
          <p class="name">{{ item.name }}</p>
          <p class="attrs">{{ formatProperties(item.properties) }}</p>
          <p class="price">
            <span>¥{{ item.curPrice }}</span>
            <span>x{{ item.quantity }}</span>
            <span>总价：¥{{ (item.curPrice * item.quantity).toFixed(2) }}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.order-detail-container {
  padding: 20px;
  background-color: #fff;

  .order-info {
    margin-bottom: 20px;
    
    h3 {
      font-size: 18px;
      margin-bottom: 10px;
    }

    p {
      line-height: 30px;
      color: #666;
    }
  }

  .goods-list {
    h3 {
      font-size: 18px;
      margin-bottom: 10px;
    }

    .goods-item {
      display: flex;
      padding: 20px 0;
      border-bottom: 1px solid #f5f5f5;

      img {
        width: 100px;
        height: 100px;
        object-fit: cover;
      }

      .goods-info {
        flex: 1;
        margin-left: 20px;

        .name {
          font-size: 16px;
          margin-bottom: 10px;
        }

        .attrs {
          color: #999;
          margin-bottom: 10px;
        }

        .price {
          color: $priceColor;
          
          span {
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>